<script setup lang="ts">
import { onMounted, ref } from 'vue'
import warnImg from '@/assets/bit-screen/monitor/warnImg.png'

import openPanel from '@/assets/bit-screen/monitor/openPanel_R.png'
import closePanel from '@/assets/bit-screen/monitor/closePanel_R.png'
import { getWarningList } from '@/api/home/index'
interface I_Warn {
  name: string
  aname: string
  createTime: string
}
const warnList = ref<I_Warn[]>([
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
  { name: '无人机开机失败', aname: '2号机场', createTime: '07.20 15:30:15' },
])
const drawer = ref(false)
const toggleDrawer = () => {
  drawer.value = !drawer.value
}
const page = ref(1);  
const loading = ref(false);  

const getWarnList = async () => {
  const params = {
    status: 1,
    page:page.value,
    limit: 20
  }
  const res = await getWarningList(params)
  warnList.value = res.data.records
}
const load=()=>{
  console.log('触底')
 
}
onMounted(() => {
  // getWarnList()
})
</script>

<template>
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-if="!drawer"
    :src="openPanel"
    alt=""
  />
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-else
    :src="closePanel"
    alt=""
  />
  <div class="rt-con" :class="[drawer ? 'rt-isOpen' : 'rt-isClose']">
    <div class="title-box">近期预警</div>
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <li class="item-box" v-for="(item, index) in warnList" :key="index">
        <img class="img-left" :src="warnImg" alt="" />
        <div class="text-box">
          <p class="mb-8px font-medium">{{ item.name }}</p>
          <div class="text-bottom text-sm">
            <span class="text-[#de6868]"> {{ item.aname }}</span>
            |
            <span class="text-[#D9e4f2]">{{ item.createTime }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.rt-isClose {
  z-index: -1;
  width: 0;
  position: absolute;
}
.rt-isOpen {
  width: 20%;
  z-index: 2001;
  position: absolute;
  right: 15px;
  top: 0px !important;
  background: rgba(9, 36, 74, 0);
  height: 93.3%;
  box-shadow: none;
  overflow-y: auto;
  background: rgba(0, 42, 84, 1);
}
:deep(.el-drawer.rtl.open) {
  width: 19% !important;
  position: absolute;
  right: 0;
  top: 85px !important;
  padding: 0 !important;
  margin-right: 35px !important;
  height: 87%;
  box-shadow: none;
  background: rgba(0, 42, 84, 0.8);
}
:deep(.el-drawer__body) {
  padding: 0 !important;
}

.side-icon {
  position: absolute;
  z-index: 9999;
  top: 70%;
  right: -5px;
  transform: translateY(-50%);
  height: 21.2%;
  cursor: pointer;
  width: 40px;
  height: 80px;
  border: 1px solid #0c6eba;
  border-radius: 6px 0px 0px 6px;
}
.isOpen {
  position: absolute;
  right: calc(19% + 33px);
  z-index: 9999 !important;
}

.rt-con {
  font-family: PingFang SC;

  .title-box {
    background: url('@/assets/bit-screen/schedule-mge/title_bg.png') center left;
    background-size: cover;
    padding-left: 40px;
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 10px;
    color: #d9e4f2;
  }
  .item-box {
    border: 1px solid #52deff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 17px 19px;
    .img-left {
      width: 38px;
      height: 38px;
      margin-right: 12px;
    }
  }
}
@media screen and (max-width: 1600px) {
  .rt-isOpen {
    width: 26%;
  }
  .isOpen {
    position: absolute;
    right: calc(26% + 15px);
    z-index: 9999 !important;
  }
}
</style>
